<template>
  <div class="left-menu">
    <div class="left-auto-btn">
      <el-button size="small" plain @click="isCollapse = !isCollapse">{{
        isCollapse ? '展开' : '收缩'
      }}</el-button>
    </div>
    <el-menu
      default-active="1-1"
      :default-openeds="['1']"
      class="el-menu-vertical-demo"
      :collapse="isCollapse"
      @select="handleSelect"
    >
      <el-sub-menu index="1">
        <template #title>
          <el-icon><chicken /></el-icon>
          <span>推荐</span>
        </template>
        <el-menu-item index="1-1">
          <el-icon><magic-stick /></el-icon>发现音乐
        </el-menu-item>
        <el-menu-item index="1-2">
          <el-icon><calendar /></el-icon>个性推荐
        </el-menu-item>
        <el-menu-item index="1-3">
          <el-icon><user-filled /></el-icon>我的音乐
        </el-menu-item>
        <el-menu-item index="1-4">
          <el-icon><film /></el-icon>视频
        </el-menu-item>
        <el-menu-item index="1-5">
          <el-icon><tickets /></el-icon>朋友
        </el-menu-item>
        <el-menu-item index="1-6">
          <el-icon><place /></el-icon>私人FM
        </el-menu-item>
      </el-sub-menu>
      <el-sub-menu index="2">
        <template #title>
          <el-icon><histogram /></el-icon>
          <span>创建的歌单</span>
        </template>
        <el-menu-item
          :index="'2-' + index"
          v-for="(item, index) in getUserSonglist.slice(0, 10)"
          :key="item.id"
          class="song-list"
          @click="togSonglist(item.id, index)"
        >
          <el-icon><cloudy /></el-icon>
          <div class="text-full-hidden">{{ item.name }}</div>
        </el-menu-item>
      </el-sub-menu>
    </el-menu>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { Edit } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import { useMapGetters } from '@/hook/use-map'
import verificationLogin from '@/utils/verification-login'
import { Message } from '@/utils/message'

export default defineComponent({
  setup() {
    const router = useRouter()
    // const menus = ref([{ name: '发现音乐', index: '1-1' }])
    const isCollapse = ref(false)
    const handleSelect = (key: string) => {
      let path = null
      let login = verificationLogin()
      switch (key) {
        case '1-1':
          path = '/main/findmucis/stylemusic'
          break
        case '1-2':
          path = '/main/personality'
          break
        case '1-3':
          path = '/main/mymusic'
          break
        case '1-4':
          path = '/main/videoshow'
          break
        case '1-5':
          path = '/main/friends'
          break
        case '1-6':
          path = '/main/privatefm'
          break

        default:
          break
      }
      // path && router.push(path)
      if (path) {
        if (key !== '1-1' && !login) {
          Message('请先登录', 'warning')
        } else {
          router.push(path)
        }
      }
    }
    const togSonglist = (id: number, index: number) => {
      if (!index) {
        router.push('/main/songsheet' + id + '-' + 'like')
        return
      }
      router.push('/main/songsheet' + id)
    }
    const gettersMusic = useMapGetters('login', ['getUserSonglist'])
    return {
      isCollapse,
      handleSelect,
      Edit,
      togSonglist,
      ...gettersMusic
    }
  }
})
</script>

<style lang="less">
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  height: 680px;
  overflow-y: auto;
  overflow-x: hidden;
}
.left-menu {
  .left-auto-btn {
    width: 100%;
    text-align: center;
  }
}
</style>
